<template>
  <section class="container">
    <div>
      nihidisahdiahisdiashd<br />232<br />232<br />232<br />232<br />232
    </div>
    <div>
      nihidisahdiahisdiashd<br />232<br />232<br />232<br />232<br />232
    </div>
    <span class="d">2</span>
    <div class="message-list">
      <div class="message">
        <Typewriter 
            class="fix" 
            text="hello! my name is jack. what is your name? how old are you? where are you from? can you tell me your phone?">
        </Typewriter>
        hello! my name is jack. what is your name? how old are you? where are you from? can you tell me your phone?
      </div>
    </div>
  </section>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import Typewriter from '@/components/Warm/Function/typewriter.vue';

  export default defineComponent({
    name: "home",
    components: {
      Typewriter
    } as any,
    setup() {

    }
  })
</script>

<style lang="scss" scoped>
  .container {
    background-image: url('@/assets/background/sh.jpg');
    //-webkit-mask-image: linear-gradient(blue, transparent);
  }
  .message-list {
    width: 375Px;
    height: 800Px;
    background-color: palegreen;

    .message {
      background-color: yellow;
      max-width: 200Px;
      display: inline-block;
      position: relative;

      .fix {
        height: 100%;
        width: 100%;
        background-color: orangered;
      }

      &::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: royalblue;
      }
    }
  }
</style>
